/*
  hooks和utils的职责划分
  hooks有使用限制，用来存放业务代码，必须运行在.vue的页面中
  utils没有使用限制，存放全局工具函数，可以运行在任何js地方
*/
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
import { computed, onUnmounted, ref, type Ref } from 'vue'

/**
 * 请求按需加载
 * @param apiFn 发送请求函数
 */
export const useObserver = (target: Ref, apiFn: () => void) => {
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // console.log('是否进入可视区域', isIntersecting)
    if (isIntersecting) {
      // 当目标元素进入可视区域时，才发送请求
      apiFn()
      // 请求已发送，主动停止检查
      stop()
    }
  })
}

/**
 * 倒计时
 * @return countTime: 倒计时时间
 * @return countTimeText: 倒计时时间格式化mm分ss秒
 * @return pause: 暂停定时器
 * @return start: 初始化倒计时，默认60s
 */
export const useCountDown = () => {
  // 倒计时时间
  const countTime = ref(0)
  // 倒计时时间格式化mm分ss秒
  const countTimeText = computed(() => {
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })
  const { pause, resume } = useIntervalFn(
    () => {
      countTime.value--
      if (countTime.value <= 0) {
        // 暂停定时器
        pause()
      }
    },
    1000,
    { immediate: false }
  )
  // 初始化倒计时
  const start = (seconds = 60) => {
    countTime.value = seconds
    // 启动定时器
    resume()
  }
  // 离开页面时销毁倒计时
  onUnmounted(() => {
    pause()
  })

  return { countTime, countTimeText, pause, start }
}
